<template>
  <el-form :model="login" class="w-50 mx-auto mt-5">
    <el-form-item>
      <img src="@/assets/logo.png" class="mx-auto" style="width: 5rem" />
    </el-form-item>
    <el-form-item>
      <div class="fs-1 mx-auto">登录</div>
    </el-form-item>
    <el-form-item>
   <el-row  class="mx-auto w-75">
      <el-col :span="6" class="text-end">
        <span>用户名: </span>
      </el-col>
      <el-col :span="18">
        <el-input
          v-model="login.userName"
          class="w-75 mx-auto"
          placeholder="用户名"
        ></el-input>
    
      </el-col>
   </el-row>
    </el-form-item>
    <el-form-item>
     <el-row  class="mx-auto w-75">
      <el-col :span="6" class="text-end">
        <span>密码: </span>
        </el-col>
        <el-col :span="18"> 
        <el-input
          v-model="login.userPassword"
          class="w-75 mx-auto"
          placeholder="密码"
        ></el-input>
      </el-col>
     </el-row>
    </el-form-item>   
    <el-form-item>
      <div class="mx-auto">
        <router-link to="/registry">注册</router-link>
      </div>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" class="mx-auto" @click="loginAction">
        登录
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import auth from '@/tools/auth.js'
export default {
name:"LoginFrame",
data() {
    return {
      login: {
        userName: null,
        userPassword: null,
        
      },
    };
  },
  mounted(){
    auth.logout();
},
methods:{
    loginAction(){
        
        this.$axios.post('/api/login',this.login).then(response =>{
             let data = response.data;
             if(data.code==200){
                 //1.保存令牌
                 let token = data.data;
                 auth.saveToken(token);
                 //跳转到个人空间的首页
                 this.$router.push('/space');
             }else{
                 alert(data.msg);
             }
         })
        }

    }
};

</script>

<style>

</style>